Tutoriel uMap

Qu'est-ce qu'une carte dynamique ?

C'est une carte que l'on peut modifier, enrichir en y plaçant des points, des zones,… On peut ensuite exporter cette carte dans une page web grace à un lien d'intégration. Plusieurs services web le proposent. Le site uMap permet de créer ce type de cartes personnalisées. Il s'appuie sur les fonds de carte Openstreetmap. De plus, il est opensource, et ne nécessite pas la création d'un compte. Les cartes ainsi créées sont mises à la disposition de tous.

Voir en plein écran

Lorsqu'il y a un grand nombre "d'épingles" à positionner, on importe un fichier de données géolocalisables, obtenu sur des sites qui proposent des données ouvertes, comme la plateforme des données publiques françaises.

Travail à réaliser

On souhaite réaliser une page web sur des lieux qui nous sont familiers en Normandie (la famille, les amis,...).

1. Placer sur une carte le cinéma Lux, à Caen

1.1 Créer un fichier CSV

Lancer LibreOffice et créer un nouveau fichier Calc.
Recopier les informations ci-dessous (une ligne comprenant les en-têtes et une autre comprenant les informations liées au cinéma Lux).

Attention aux noms des descripteurs (les en-têtes des colonnes) : uMap se basera sur les colonnes "lat" et "lon" pour positionner le lieu.
Remarquez le séparateur décimal utilisé pour ces deux colonnes : il s'agit bien d'un point et non d'une virgule.
Le descripteur "Name" sera aussi utilisé pour nommer l'épingle.

Enregistrer le fichier créé au format CSV (Fichier > Enregistrer sous > Type de fichier Texte CSV (.csv))

1.2 Créer la carte uMap

Rendez-vous sur le site uMap
Cliquer sur le bouton Créer une carte.
Donnez un nom (cliquez sur Carte sans nom en haut à gauche de la page) à cette carte et l'enregistrer (bouton Enregistrer en haut à droite de la page). Faites bien attention à copier le lien qui apparaît alors : il vous permettra de pouvoir modifier cette carte sans avoir à se créer un compte.

1.3 Importer les données du fichier dans la carte

Cliquez sur l'icône Importer des données
Sélectionner le fichier à importer en cliquant sur le bouton Parcourir. Vérifier que c'est le format CSV qui est seléctionné, puis cliquer sur le bouton Importer.

Si vous devez refaire cette opération, cochez la case pour remplacer le contenu du calque.

Lorsqu'on est mode Édition, si on clique sur l'épingle puis sur le crayon, les données correspondantes à cette épingle apparaissent dans le bandeau latéral. Les champs correspondent aux descripteurs du fichier CSV.

2. Placer tous les lieux désirés de Normandie sur la carte

2.1 Créer le fichier global

Reprendre le fichier Calc précédent et le compléter avec les autres données.
Ouvrir openstreetmap.org, pour repérer les positions à enregistrer.
Faie un clic-droit, pour avoir dans le menu contextuel "Afficher l'adresse".
Relever les coordonnées et donner un nom à cette adresse (maison, grand-parents,...)

2.2 Importer le fichier dans votre carte

La manipulation est la même que pour un seul cinéma. Reportez-vous au point 1.3 pour réaliser cette manipulation. Pensez à cocher la case Remplacer le contenu du calque.

3. Améliorer l'affichage

Vous pouvez, en modifiant les propriétés de la couche :

changer la couleur de l'épingle ;
changer la forme de l'icône (choisissez "Goutte") ;
Choisir une image de l'icône à l'intérieur de la goutte qui soit en rapport avec le cinéma.
Dans Options d'interaction > Gabarit du contenu de la pop-up, remplacer à l'intérieur des accolades le mot "Description" par le mot "Adresse". Vous pouvez vérifier le résultat en cliquant sur le bouton Enregistrer puis sur "Désactiver le mode édition". Le contenu du "pop-up" apparaît maintenant lorsque vous cliquez sur une épingle.
Il est possible de compléter les lieux ou d'y ajouter une autre liste.

4. Pour aller plus loin

Il est possible de réaliser cette manipulation avec des fichiers contenant déjà des lieux et leurs coordonnées (listes des cinémas, des bibliothèques, des stations vélos, ...°)

5. Intégrer cette carte dans une page web

Cette intégration se fait grâce à un lien d'intégration. C'est un code contenu dans une "iframe" qui est généré par le site uMap (par exemple, d'autres sites comme Youtube le propose aussi). Ce code, une fois généré et copié se colle à l'endroit où on souhaite le voir apparaître dans la page web. Voir au début de cette page quel code d'intégration a été utilisé pour insérer la carte.

Le code d'intégration se crée à partir du bouton Exporter et partager la carte (à droite de la fenêtre). Plusieurs réglages sont possibles avant de recopier le code d'intégration.

Document d'origine Philippe Morin - Équipe des formateurs S.N.T. - Académie de Normandie - 2020